{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    文章详情
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">作者：{{ article.author }}
                {% if user == article.author %}
                    <a data-toggle="modal" data-target="#exampleModal"
                       href="{% url "article:article_delete" article.id %}">删除文章</a>
                    <a href="{% url "article:article_update" article.id %}">编辑文章</a>
                {% endif %}
                <div>
                    浏览：{{ article.total_view }}
                </div>
            </div>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
                <hr>
                {% if user.is_authenticated %}
                    <div>
                        <form action="{% url 'comment:post_comment' article.id %}" method="POST">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="body">
                                    <strong>我也要发言：</strong>
                                </label>
                                <textarea
                                        type="text"
                                        class="form-control"
                                        id="body"
                                        name="body"
                                        rows="2"></textarea>
                            </div>
                            <!-- 提交按钮 -->
                            <button type="submit" class="btn btn-primary ">发送</button>
                        </form>
                    </div>
                    <br>
                {% else %}
                    <br>
                    <h5 class="row justify-content-center">
                        请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                    </h5>
                    <br>
                {% endif %}
                <!-- 显示评论 -->
                <h4>共有{{ comments.count }}条评论</h4>
                <div>
                    {% for comment in comments %}
                        <hr>
                        <p>
                            <strong style="color: pink">
                                {{ comment.user }}
                            </strong> 于
                            <span style="color: green">
                    {{ comment.created|date:"Y-m-d H:i:s" }}
                </span> 时说：
                        </p>
                        <pre style="font-family: inherit; font-size: 1em;">
{{ comment.body }}</pre>
                    {% endfor %}
                </div>
            </div>
        </div>

    </div>
    </div>
    <!--删除弹窗-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">是否删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <a href="{% url "article:article_delete" article.id %}">
                        <button type="button" class="btn btn-primary">删除</button>
                    </a>

                </div>
            </div>
        </div>
    </div>
{% endblock %}